<template>
  <!--地貌设定新增弹层 -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleSmall"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      :rules="rules"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="地貌类型" prop="typeName">
            <el-input v-model.trim="formData.typeName" placeholder="请输入地貌类型" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型编号" prop="typeNum">
            <el-input v-model="formData.typeNum" size="medium" placeholder="请输入类型编号" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型顺序" prop="orderNum">
            <el-input-number v-model="formData.orderNum" readonly style="width: 100%" controls-position="right" :min="0" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="remark">
            <label slot="label" v-html="`备&emsp;&emsp;注`" />
            <el-input v-model="formData.remark" :rows="3" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addRegionalType,
  editRegionalType,
  detailRegionalType,
  getMaxNum
} from '@/api/superviseBaseInfo/regionalSettings'
export default {
  data() {
    return {
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: {
        typeNum: '',
        typeName: '', // 地貌类型
        orderNum: '', // 排序
        remark: ''
      },
      // 表单验证规则
      rules: {
        typeName: [
          { required: true, message: '地貌类型不能为空', pattern: '[^\x22]+', trigger: 'blur' }
        ],
        typeNum: [
          { required: true, message: '类型编号不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ]
      }
      /* 新增 end*/
    }
  },
  methods: {
    /* 新增/编辑弹层 start*/
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.emptyAddForm()
      if (id) {
        this.getDetailById(id)
      } else {
        this.getMaxNum()
      }
    },
    // 获取最大排序
    async getMaxNum() {
      const { data } = await getMaxNum()
      this.formData.orderNum = data
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailRegionalType(id)
      this.formData = { ...data }
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          if (this.formData.id) { // 更新
            await editRegionalType(this.formData)
            this.msgSuccess('修改成功')
          } else { // 新增
            await addRegionalType(this.formData)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.id = ''
    }
    /* 新增弹层 end*/
  }

}
</script>

<style scoped>
.tree-city {
  margin-top: 8px;
}
</style>
